<?php get_header(); ?>
<script language="javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.imagesloaded.js" type="text/javascript"></script>
<script>
	var count = 6;
  var t;
  var d_filter = '.commercial, .corporate, .documentary, .fashion, .video, .wedding';
  $(document).ready(function(){
    $('.portfolio-nav-container ul li').addClass('active');
    
    // var $container = $('.portfolio-box');
    
    // $('.item-container').masonry({
      // columnWidth: 50
    // });
    
    var $handler = $('.item-container');
    
    $handler.imagesLoaded(function(){
      $handler.isotope({
        itemSelector: '.item',
        filter: d_filter,
        animationEngine : 'jquery'
      });
      
      // set height
      $('.item').each(function(){
        var h = $(this).find('img').height();
        $(this).find('.description').css('height', (h)+'px');
        $(this).find('.description-layout').css('height', (h-10)+'px');
      });
      
      $('.item').hover(function(){
        // $(this).css('opacity', '1');
        $(this).find('.description').css('opacity', '1');
      },function(){
        // $(this).css('opacity', '0');
        $(this).find('.description').css('opacity', '0');
      });
    });
    
    console.log(d_filter);
    $('.portfolio-nav ul li').click(function(){
			if($(this).hasClass('active')){
		
				if(count > 1){
					$(this).toggleClass('active');
					var n_filter = $(this).attr('data-filter');
					d_filter = d_filter.replace(','+n_filter,'');
					d_filter = d_filter.replace(n_filter+',','');
					d_filter = d_filter.replace(n_filter,'');
					
					if($(this).hasClass('active')){
						d_filter = d_filter+','+n_filter;
					}
          
          var tmp = d_filter.split(',');
          count--;
          d_filter = '';
          for(var a = 0; a < count; a++){
            if(a != count-1){
              d_filter = d_filter + tmp[a] + ',';
            }else{
              d_filter = d_filter + tmp[a];
            }
          }
					
					$handler.isotope({ filter: d_filter }, function(){
            // $('.content .container').portfolio_center();
          });
					// count--;
				}
			}else{
				count++;
				if(count > 1){
					$(this).toggleClass('active');
					var n_filter = $(this).attr('data-filter');
					d_filter = d_filter.replace(','+n_filter,'');
					d_filter = d_filter.replace(n_filter+',','');
					d_filter = d_filter.replace(n_filter,'');
					
					if($(this).hasClass('active')){
						d_filter = d_filter+','+n_filter;
					}
					
					$handler.isotope({ filter: d_filter }, function(){
            // $('.content .container').portfolio_center();
          })
          
          
				}
			}
      console.log(d_filter);
    });
    
    var img = $('.content .container').imagesLoaded();
      
    img.always(function(){
      $('.content .container').portfolio_center();
      t = $('.portfolio-box').height();
      $('.content .container').css('height', t+'px');
    });
    
    // colorbox
    $('.colorbox').colorbox({
      width: 750,
      height: 480,
      opacity: 0.9,
      next: '',
      previous: ''
    });
    
    // content reposition
    var w = $(window).width();
    var h = $(window).height();
    
    // $('.container').css('');
  });
</script>

<div class="portfolio">
  <div class="portfolio-nav">
    <div class="portfolio-nav-container">
      <ul>
      <?php
        $args = array(
          'child_of' => 1,
          'hide_empty' => false
        );
        
        $categories = get_categories($args);
        
        foreach($categories as $category){
        // print_r($category);
      ?>
        <li data-filter=".<?php echo $category->slug ?>"><?php echo $category->name; ?></li>
      <?php } ?>
      </ul>
    </div>
  </div>

  <div class="container">
    <div class="portfolio-box">
      <hr />
      
      <div class="item-container">
        <?php
          $args = array(
            'child_of' => 1,
            'hide_empty' => false
          );
          
          $categories = get_categories($args);
          
          foreach($categories as $category){
          // print_r($category);
        ?>
      
        <?php
          $args = array(
            'numberposts' => -1,
            'category' => $category->cat_ID
          );
          
          $posts = get_posts($args);
          $n = 0;
          
          foreach($posts as $post){
          $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
        ?>
          <div class="item <?php echo $category->slug ?>">
            <img src="<?php echo $feat_image; ?>" class="bx-shadow" />
            
            <a href="<?php echo get_permalink($post->ID); ?>" class="description colorbox">
              <div class="description-layout">
                <h4><?php echo $post->post_title ?></h4>
                <hr />
                <?php remove_filter ($post->post_content, 'wpautop'); ?>
                <p>"<?php echo $post->post_content; ?>"</p>
                <?php
                  $flag = false;
                  $attachments = attachments_get_attachments();
                  if ($attachments) {
                  foreach($attachments as $attachment){
                  $mime = split('/',$attachment['mime']);
                  $mime = $mime[0];
                  
                  if($mime == 'video' && $flag == false){
                  $flag = true;
                ?>
                <i class="album-icons icon-video"></i>
                <?php }}} ?>
                <i class="album-icons icon-photo"></i>
              </div>
            </a>
          </div>
        
        <?php }} ?>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</div>
<div class="clear"></div>
<?php get_footer(); ?>
